<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <Row type="flex">
      <Form ref="formInline" :model="formInline" inline :label-width="0" label-position="left">
         <FormItem prop="status" label="">
          <Select v-model="formInline.type" placeholder="数据来源" style="minWidth:162px" filterable clearable>
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="" prop="mobile">
          <Input type="text" v-model="formInline.mobile" placeholder="客户手机号" clearable/>
        </FormItem>
        <FormItem label="" prop="devCompany">
          <Input type="text" v-model="formInline.devCompany" placeholder="渠道商户" clearable/>
        </FormItem>
        <FormItem label="" prop="agentCompany">
          <Input type="text" v-model="formInline.agentCompany" placeholder="经纪人公司" clearable/>
        </FormItem>
        <FormItem label="" prop="premisesName">
          <Input type="text" v-model="formInline.premisesName" placeholder="楼盘名称" clearable/>
        </FormItem>
        <FormItem prop="date" label="">
          <DatePicker ref="datePicker" type="daterange" @on-change="selectDate" placeholder="请选择时间" style="width: 200px;"></DatePicker>
        </FormItem>
        <div class="form-but">
          <Button type="success" @click="getList">查询</Button>
        </div>
      </Form>
    </Row>
    <Spin size="large" fix v-if="spinShow">预计5秒后返回,请稍候...</Spin>
    <Table stripe border ref="selection" :columns="columns" :data="dataList" ></Table>
    <Page :total="total" show-sizer show-elevator show-total @on-change="changePageNum" @on-page-size-change="changePageSize" />
  </div>
</template>

<script>
import { formatTime } from '@/utils'
import Api from '@/api'

const report = Api.report
export default {
  name: 'list',
  components: {
  },
  data() {
    return {
      breadcrumb: ['报备管理', '历史报备查询'],
      formInline: {
        type: '',
        mobile: '',
        devCompany: '',
        agentCompany: '',
        premisesName: '',
        createTimeStart: '',
        createTimeEnd: ''
      },
      spinShow: false,
      typeList: [
        {
          label: '基础表',
          value: 'normal'
        },
        {
          label: '备份表',
          value: 'backend'
        }
      ],
      columns: [
        {
          title: '报备来源',
          key: 'type'
        }, {
          title: '渠道商户',
          key: 'devCompany'
        }, {
          title: '楼盘名称',
          key: 'premisesName'
        }, {
          title: '经纪人',
          key: 'accountName'
        }, {
          title: '经纪人公司',
          key: 'agentCompany'
        }, {
          title: '客户姓名',
          key: 'customerName'
        }, {
          title: '客户电话',
          key: 'mobile'
        }, {
          title: '报备时间',
          key: 'createTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataList: []
    }
  },
  mounted() {
    // this.getList();
  },
  methods: {
    selectDate(date) {
      this.formInline.createTimeStart = date[0]
      this.formInline.createTimeEnd = date[1]
    },
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum })
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize })
    },
    async getList(paramsPage = null) {
      const _self = this;
      _self.spinShow = true;
      let pageNum
      let pageSize
      let page
      const statePage = this.page
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum
        pageSize = paramsPage.pageSize || statePage.pageSize
        page = { pageNum, pageSize }
        this.page = { pageNum, pageSize }
      } else {
        page = statePage
      }
      const formInline = this.formInline
      if (!formInline.mobile) {
        _self.spinShow = false;
        this.$Message.success('查询有点久,必须指定手机号!');
        return;
      }
      const value = {}
      Object.keys(formInline).forEach(key => {
        if (formInline[key]) {
          value[key] = formInline[key]
        }
      })
      const params = {
        page,
        ...value
      }
      const { responseCode, data } = await this.$request(report.listCusPreHistory, params)
      _self.spinShow = false;
      if (responseCode === '1') {
        _self.dataList = data.list;
        _self.total = data.totalCount
      }
    }
  },
}
</script>

<style scoped>
</style>
